<template>
	<view class="content">
		<uni-forms :modelValue="formData" ref="form" label-width="100px" v-if="formData">
			<uni-forms-item label="姓名：" name="staffName">
				{{formData.staffName}}
			</uni-forms-item>
			<view class="line-bottom"></view>
			<uni-forms-item label="性别：" name="getGenderFromIdCard">
				{{getGenderFromIdCard}}
			</uni-forms-item>
			<view class="line-bottom"></view>
			<uni-forms-item label="联系电话：" name="phone">
				{{formData.staffInfo.phone}}
			</uni-forms-item>
			<view class="line-bottom"></view>
			<uni-forms-item label="身份证号码：" name="idCard">
				{{maskedIdCard}}
			</uni-forms-item>
			<view class="line-bottom"></view>
			<uni-forms-item label="所属工会：" name="applyTradeUnionName">
				{{formData.applyTradeUnionName}}
			</uni-forms-item>
		</uni-forms>

		<uni-forms label-width="100px">
			<uni-forms-item label="审批意见：" name="comments">
				<uni-easyinput type="textarea" style="border-radius: 30rpx;" :disabled="!activedStatus" disableColor="#ccc"
					v-model="formData.organizerApprovalRecordsLog.approvalReason" />
			</uni-forms-item>
		</uni-forms>

		<view class="btn1 flex button_button" v-if="activedStatus">
			<button class="button1 flex1 margin20" :loading="buttonLoadings" @click="handleReject">
				驳回
			</button>
			<button class="button flex1" :loading="buttonLoading" @click="handleAgree">
				同意
			</button>
		</view>
	</view>
</template>
<script>
	import {
		login
	} from '../../api/login';
	import {
		applyForOrganizerAudit,
		queryOrganizerApprovalRecordsPageId
	} from '../../api/work/organizationalmanagement';
	import {
		toast
	} from '../../utils/common';

	export default {
		data() {
			return {
				buttonLoading: false,
				activedStatus: false,
				buttonLoadings: false,
				showScancode: true,
				formData: {}, // 将 formData 初始化为一个空对象
			};
		},
		onLoad(option) {
			console.log(option);
			queryOrganizerApprovalRecordsPageId(option.itemId).then(res => {
				console.log(res);
				this.formData = res.data || {}; // 确保 formData 不为 null
			}).catch(err => {
				console.error('获取数据失败:', err);
			});

			if (option.actived > 1) {
				this.activedStatus = false
			} else {
				this.activedStatus = true
			}

		},
	
		
		computed: {
			// 掩码身份证号码
			maskedIdCard() {
				const idCard = this.formData.staffInfo.idCard;
				return idCard ? idCard.replace(/^(\d{6})\d+(\d{4})$/, '$1********$2') : '';
			},
			getGenderFromIdCard() {
				const idCard = this.formData.staffInfo?.idCard; // 使用可选链以防止错误
				// 检查身份证号码是否为有效长度
				if (typeof idCard !== 'string' || idCard.length < 18) {
					return '未知'; // 增强错误处理
				}

				// 获取倒数第二位的数字
				const secondLastDigit = parseInt(idCard.charAt(idCard.length - 2), 10);

				// 判断性别：奇数为男，偶数为女
				return secondLastDigit % 2 === 0 ? '女' : '男';
			},
		},
		methods: {
			handleAgree() {
				this.formData.status = 0;
				this.subpmapplyForOrganizerAudit();
				this.buttonLoading = true;
			},
			handleReject() {
				this.formData.status = 1;
				console.log("驳回按钮被点击");
				this.subpmapplyForOrganizerAudit();
				this.buttonLoadings = true;
			},
			subpmapplyForOrganizerAudit() {
				applyForOrganizerAudit(this.formData)
					.then(() => {
						toast('处理成功');
						this.buttonLoading = false;
						this.buttonLoadings = false;
						setTimeout(() => {
							this.$router.back();
						}, 1000);
					})
					.catch(err => {
						this.buttonLoading = false;
						this.buttonLoadings = false;
						setTimeout(() => {
							this.$router.back();
						}, 1000);
						toast(err.msg);
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 85vh;
	}

	.button_button {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	::v-deep .uni-forms {
		margin-top: 16rpx;
		padding: 32rpx;
		background-color: #fff;
	}

	::v-deep .uni-forms-item__label {
		color: #666666;
	}

	::v-deep .uni-forms-item__content {
		line-height: 76rpx;
		color: #333333;
	}

	::v-deep .uni-forms-item {
		margin-bottom: 0;
	}

	.icon {
		width: 20px;
		height: 20px;
	}

	.button1 {
		border-radius: 46rpx;
		background: #fff;
		color: rgba(189, 26, 45, 1);
		font-size: 32rpx;
		border: 1px solid rgba(189, 26, 45, 1);
	}

	.line-bottom {
		border-bottom: 1rpx solid #E5E5E5;
		margin: 16rpx 0;
	}

	.agree {
		padding: 32rpx;
		margin-top: 16rpx;

		.left {
			width: 52rpx;
		}

		.right {
			.text {
				font-size: 12px;
				color: rgba(189, 26, 45, 1);
			}
		}
	}
</style>